$(function () {
  //获得当前<ul>
  var $uList = $(".scroll-box ul");
  var timer = null;
  //触摸清空定时器
  $uList.hover(function () {
    clearInterval(timer);
  },
    function () { //离开启动定时器
      timer = setInterval(function () {
        scrollList($uList);
      },
        1000);
    }).trigger("mouseleave"); //自动触发触摸事件
  //滚动动画
  function scrollList(obj) {
    //获得当前<li>的高度
    var scrollHeight = $("ul li:first").height();
    //滚动出一个<li>的高度
    $uList.stop().animate({
      marginTop: -scrollHeight
    },
      600,
      function () {
        //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
        $uList.css({
          marginTop: 0
        }).find("li:first").appendTo($uList);
      });
  }
});



// 数据请求部分

// 1、区域消耗
(function () {
  $.ajax({
    type: 'get',
    url: 'http://localhost:8080/area/getAreaInfo',
    dataType: 'json', headers: {
      //WRITE IF THEIR HAVE SOME HEADER REQUEST OR DATA
    }, crossDomain: true, success: function (data, textStatus, xhr) {
      generateAreaChart(data);
    }, error: function (xhr, errorThrown) {
      console.log(errorThrown);
    }
  })
})()

function generateAreaChart(data) {
  var myChart = echarts.init(document.querySelector(".line .chart"));
  var areas = [];
  var emissions = [];
  for (var i = 0; i < data.data.areaList.length; i++) {
    areas.push(data.data.areaList[i].area);
    emissions.push(data.data.areaList[i].emissions);
  }
  var option = option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['能耗'],
      right: '7%',
      textStyle: {
        color: '#0d486d'
      }
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      data: areas,
      type: 'category',
      axisLabel: {
        color: '#fff'
      }
    },
    series: [{
      name: '能耗',
      data: emissions,
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: '#FF3962'
          }, {
            offset: 1,
            color: '#4075FF'
          }]),
        }
      }
    }]
  };
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

// 工序能耗
(function () {
  $.ajax({
    type: 'get',
    url: 'http://localhost:8080/process/getProcessInfo',
    dataType: 'json', headers: {
      //WRITE IF THEIR HAVE SOME HEADER REQUEST OR DATA
    }, crossDomain: true, success: function (data, textStatus, xhr) {
      generateProcessChart(data);
    }, error: function (xhr, errorThrown) {
      console.log(errorThrown);
    }
  })
})()

function generateProcessChart(data) {
  var myChart = echarts.init(document.querySelector(".line2 .chart"));
  console.log(data);
  var datas = [];
  for (var i = 0; i < data.data.processList.length; i++) {
    var obj = new Object();
    obj.name = data.data.processList[i].type;
    obj.value = data.data.processList[i].energy;
    datas.push(obj);
  }

  console.log(datas)
  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '2%',
      left: '2%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        name: '产能数据',
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',


        },
        emphasis: {
          label: {
            show: true,
            fontSize: '20',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: datas,
        itemStyle: {
          normal: {
            color: function (params) {
              //自定义颜色
              var colorList = [
                '#4075FF', '#FE9644', '#FFF05F', '#40FF83',
              ];
              return colorList[params.dataIndex]
            }
          }
        }
      }
    ]
  };

  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}


//  产能能耗比
(function () {
  $.ajax({
    type: 'get',
    url: 'http://localhost:8080/energyConsumption/getConsumptionList',
    dataType: 'json', headers: {
      //WRITE IF THEIR HAVE SOME HEADER REQUEST OR DATA
    }, crossDomain: true, success: function (data, textStatus, xhr) {
      generateEnergyRateChart(data);
    }, error: function (xhr, errorThrown) {
      console.log(errorThrown);
    }
  })
})()

function generateEnergyRateChart(data) {
  console.log(data)
  var electrics = [];
  var waters = [];
  var gases = [];
  var times = [];
  var productions = [];
  for (let i = 0; i < data.data.energyConsumptionList.length; i++) {
    electrics.push(data.data.energyConsumptionList[i].electric);
    waters.push(data.data.energyConsumptionList[i].water);
    gases.push(data.data.energyConsumptionList[i].gas);
    times.push(data.data.energyConsumptionList[i].time);
    productions.push(data.data.energyConsumptionList[i].production);
  }
  var myChart = echarts.init(document.querySelector(".pie .chart"));
  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {            // Use axis to trigger tooltip
        type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {
      data: ['电', '水', '气', '产能'],
      textStyle: {
        color: '#9bb9d7'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: times,
      axisLabel: {
        color: '#9bb9d7'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#9bb9d7'
      }
    },
    series: [
      {
        name: '电',
        type: 'bar',
        stack: 'total',
        barWidth: 20,
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: electrics,
        itemStyle: {
          color: '#4075FF'
        }
      },
      {
        name: '水',
        type: 'bar',
        stack: 'total',
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: waters,
        itemStyle: {
          color: '#1BCBFF'
        }
      },
      {
        name: '气',
        type: 'bar',
        stack: 'total',
        label: {
          show: false
        },
        emphasis: {
          focus: 'series'
        },
        data: gases,
        itemStyle: {
          color: '#40FF83'
        }
      },
      {
        name: '产能',
        type: 'line',
        smooth: true,
        data: productions,
        itemStyle: {
          color: '#F3FF39'
        }
      }
    ]
  };

  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });

}
